import React, { useState } from 'react';
import {
  Box,
  Typography,
  TextField,
  Button,
  Container,
  Paper,
  Avatar,
  FormControl,
  InputLabel,
  Select,
  MenuItem,
  Grid
} from '@mui/material';
import './profile.css';

const SOCIAL_PREFERENCES = [
  'Outgoing',
  'Reserved',
  'Social Butterfly',
  'Quiet Observer'
];

const BUSINESS_PREFERENCES = [
  'Bars',
  'Restaurants',
  'Cafes',
  'Clubs',
  'Live Music Venues'
];

export default function Profile() {
  const [formData, setFormData] = useState({
    username: 'jonsnow99',
    fullName: 'Jon Snow',
    email: 'jon@gmail.com',
    phone: '+1 123 456 67',
    address: 'Chicago | USA',
    socialPreference: 'Outgoing',
    businessPreferences: ['Bars', 'Restaurants']
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleBusinessPreferencesChange = (event) => {
    const { value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      businessPreferences: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // TODO: Handle form submission
    console.log('Form submitted:', formData);
  };

  return (
    <Container maxWidth="md" sx={{ mt: 4, mb: 4 }}>
      <Paper elevation={3} sx={{ p: 4 }}>
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
          <Avatar
            sx={{ width: 100, height: 100, mr: 3, bgcolor: 'primary.main' }}
          >
            {formData.fullName.split(' ').map(n => n[0]).join('')}
          </Avatar>
          <Typography variant="h4" component="h1">
            Profile Settings
          </Typography>
        </Box>

        <form onSubmit={handleSubmit}>
          <Grid container spacing={3}>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Username"
                name="username"
                value={formData.username}
                onChange={handleChange}
                disabled
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Full Name"
                name="fullName"
                value={formData.fullName}
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Email"
                name="email"
                type="email"
                value={formData.email}
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <TextField
                fullWidth
                label="Phone"
                name="phone"
                value={formData.phone}
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={12}>
              <TextField
                fullWidth
                label="Address"
                name="address"
                value={formData.address}
                onChange={handleChange}
              />
            </Grid>
            <Grid item xs={12} sm={6}>
              <FormControl fullWidth>
                <InputLabel>Social Preference</InputLabel>
                <Select
                  name="socialPreference"
                  value={formData.socialPreference}
                  onChange={handleChange}
                  label="Social Preference"
                >
                  {SOCIAL_PREFERENCES.map((preference) => (
                    <MenuItem key={preference} value={preference}>
                      {preference}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
            <Grid item xs={12} sm={6}>
              <FormControl fullWidth>
                <InputLabel>Business Preferences</InputLabel>
                <Select
                  multiple
                  name="businessPreferences"
                  value={formData.businessPreferences}
                  onChange={handleBusinessPreferencesChange}
                  label="Business Preferences"
                >
                  {BUSINESS_PREFERENCES.map((preference) => (
                    <MenuItem key={preference} value={preference}>
                      {preference}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>
            </Grid>
          </Grid>

          <Box sx={{ mt: 4, display: 'flex', justifyContent: 'flex-end' }}>
            <Button
              type="submit"
              variant="contained"
              color="primary"
              size="large"
            >
              Save Changes
            </Button>
          </Box>
        </form>
      </Paper>
    </Container>
  );
} 